<template>
	<view class="box">
		<image class="logo" src="@/static/img/logo.png"></image>
		<view class="btmBox">
			<uv-button type="primary" text="快速登录/注册" open-type="getPhoneNumber" @getphonenumber="author" size="24rpx" v-if="checked"
				 color="#31C0ED"
				:customStyle="{width:'550rpx',height:'90rpx',borderRadius:'12rpx',fontSize:'24rpx'}"></uv-button>
				<uv-button type="primary" text="快速登录/注册" @click="clickToast()" size="24rpx"
					 color="#31C0ED"
					:customStyle="{width:'550rpx',height:'90rpx',borderRadius:'12rpx',fontSize:'24rpx'}" v-else></uv-button>
				<view style="height:40rpx;"></view>
				<!-- <uv-button type="primary" text="手机号验证码登录" @click="popup.open()"
					 color="#31C0ED" :customStyle="{width:'550rpx',height:'90rpx',borderRadius:'12rpx',fontSize:'24rpx'}"></uv-button> -->
		</view>
		<view class="checkbox btmBox1" >
			<image src="@/static/img/xuan01.png" v-if="checked" @click="checked = false"></image>
			<image src="@/static/img/xuan02.png" v-else @click="checked = true"></image>
			<view class="tits">
				<text @click="checked = !checked">我已阅读并同意</text>
				<navigator url="agreement?type=1" class="navs">《用户协议》</navigator>和<navigator url="agreement?type=4" class="navs">《隐私条款》</navigator>
			</view>
		</view>
		<uv-popup ref="popup" :round="30" mode="bottom" :overlayStyle="{background: 'rgba(255, 255, 255, 0.4)'}">
			<view class="poupBoxLogin">
				<view>
					<view class="formBox">
						<uv-form labelPosition="left">
							<uv-form-item  borderBottom 
								customStyle="padding:30rpx 0 30rpx;" style="padding:10rpx 0 20rpx;">
							<view style="display: flex;">
								<view class="momo">手机号</view>
										<uv-input v-model="phone" border="none" placeholder="请输入手机号"></uv-input>
							</view>
							</uv-form-item>
							<uv-form-item  borderBottom
								customStyle="padding:30rpx 0 30rpx;" style="padding:10rpx 0 20rpx;">
							<view style="display: flex;">
								<view class="momo"  style="margin-top:22rpx;">验证码</view>
							<uv-input placeholder="请输入验证码" border="none" v-model="sms_code" clearable
								maxlength="11">
								<template v-slot:suffix>
									<SendCode :phone="phone" sence="register" ></SendCode>
								</template>
							</uv-input>
							</view>
							</uv-form-item>
						</uv-form>
					</view>
					<view class="checkbox">
						<image src="@/static/img/xuan01.png" v-if="checked" @click="checked = false"></image>
						<image src="@/static/img/xuan02.png" v-else @click="checked = true"></image>
						<view class="tits">
							<text @click="checked = !checked">我已阅读并同意</text>
							<navigator url="agreement?type=1" class="navs">《用户协议》</navigator>
							和
							<navigator url="agreement?type=4" class="navs">《隐私条款》</navigator>
						</view>
					</view>
					<uv-button v-if="checked" shape="circle" text='快速登录/注册' color='#31C0ED'
						:customStyle="{width:'550rpx',height:'90rpx',borderRadius:'12rpx',fontSize:'24rpx',marginTop:'100rpx',marginLeft:'40rpx'}"
						@click="quilyLogin()"></uv-button>
					<uv-button v-if="!checked" @click="toast('请先阅读并勾选用户协议')" text='快速登录/注册' color='#31C0ED'
						:customStyle="{width:'550rpx',height:'90rpx',borderRadius:'12rpx',fontSize:'24rpx',marginTop:'100rpx',marginLeft:'40rpx'}"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script lang="ts" setup>
	import route from '@/utils/route';
	import { toast } from '@/utils/fun';
	import { ref } from 'vue';
	import SendCode from '@/components/SendCode.vue';
	import { http } from '@/common/http/index';
	import { userStorage } from '@/hooks/useStorage';
	const [login_code, name, phone, sms_code, popup, checked, loading] = [ref(), ref(), ref(), ref(), ref(), ref(false), ref(false)];
	//授权手机号的信息
	const clickToast = (e) => {
		if (!checked.value){
			toast('请先阅读并勾选用户协议与隐私政策')
			return ;
		}
	};
	const author = (e) => {
			if (e?.errMsg === 'getPhoneNumber:ok') {
				login(e);
			}
	};
	/**
	 * 用户登录
	 */
	const login = (e) => {
		// loading.value = true;
		// 获取登录用户code
		uni.login({
			provider: 'weixin',
			success: res => {
				console.log('res.code', res.code)
				if (res.code) {
					login_code.value = res.code;
					bind(e);
				} else {
					toast('登录失败！')
					setTimeout(() => {
						loading.value = false;
					}, 1500)

				}
			},
			fail: () => {
				toast('微信登录授权失败')
				setTimeout(() => {
					loading.value = false;
				}, 1500)
			}
		});
	};
	const { setStorage } = userStorage();
	const bind = (e) => {
		let params = {
			login_code: login_code.value,
			phone_code: e.code,
		}
		http
			.post(`/api/v1/login`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('登录成功');
				setStorage('token', res.data.token);
				setTimeout(() => {
					loading.value = false;
					uni.switchTab({
						url: '/pages/tabbar/index'
					});
				}, 1500);
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//快速登录
	const quilyLogin = (e) => {
		// 	console.log('bind',e)
		// if (!name.value) return toast('请输入手机号');
		if (!phone.value) return toast('请输入手机号');
		if (!sms_code.value) return toast('请输入短信验证码');
		let params = {
			account: phone.value,
			sms_code: sms_code.value,
			// name: name.value,
		}
		http
			.post(`/api/v1/login`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('登录成功');
				setStorage('token', res.data.token);
				setTimeout(() => {
					loading.value = false;
					uni.switchTab({
						url: '/pages/tabbar/index'
					});
				}, 1500);
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});

	};
</script>

<style lang="scss" scoped>
	.momo{
		  display: flex;
		margin-top:6rpx;
		   width:150rpx;
		  font-weight: 500;
		  font-size: 30rpx;
		  color: #000000;
	}
	.box {
		background-image: url('@/static/img/bg01.png');
		background-repeat: no-repeat;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 0;
	}

	.loginBtn {
		margin-bottom: 40rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 5rpx 100rpx;
		border-radius: 12rpx;
		background: rgba(49, 192, 237, 1);
	}

	.btmBox {
		position: fixed;
		bottom: 13%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	.btmBox1{
		position: fixed;
		bottom: 4%;
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.color01 {
		color: rgba(49, 192, 237, 1);
	}

	.labelTxt {
		font-size: 28rpx;
	}

	.poupBoxLogin {
		padding: 120rpx 60rpx 280rpx;
	}

	.formBox {
		margin-bottom: 50rpx;
	}

	.checkbox {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.tits {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-left: 20rpx;
			color: #000;
			font-weight: 500;
			font-size: 24rpx;
		}

		.navs {
			padding: 0 10rpx;
			font-size: 26rpx;
			color: #31c0ed;
			font-weight: 550;
		}

	}
</style>